
<template>

<el-container class="home-container">

  <el-header><div class="banner"><img src="../assets/heima.png" alt="itcast">
  <span>欢迎来到pizhang的博客</span></div><div><el-button @click="logout">
    退出
</el-button></div></el-header>
  <el-container>
    <el-aside :width="isCollapse?'60px':'200px'">
        <!-- 菜单栏 -->
        <el-menu :default-active="active" router unique-opened :collapse="isCollapse" :collapse-transition="false"

      class="el-menu-vertical-demo"

      background-color="#323743"
      text-color="#fff"
      active-text-color="#3F9FFE">
      <!--折叠按钮-->
      <div @click="collapse" class="collapse">{{token}}</div>
      <!-- 侧面菜单 -->
      <el-submenu :index="item.id +''" v-for="(item,index) in menuList" :key="item.id">
        <template slot="title">
          <i :class="menuIcos[index]"></i>
          <span>{{item.authName}}</span>
        </template>
        <el-menu-item-group>

          <el-menu-item :index="'/'+item.path" @click="saveActive('/'+item.path)" v-for="subItem in item.children" :key="subItem.id"> <template slot="title">
          <i class="el-icon-menu"></i>
          <span>{{subItem.authName}}</span>
        </template></el-menu-item>

        </el-menu-item-group>

      </el-submenu>
      </el-menu>

      </el-aside>
      <!-- 主面板 -->
    <el-main>
        <router-view></router-view>
    </el-main>
  </el-container>
</el-container>
</template>
<style lang="less" scoped>
@keyframes unfolde {
    from{}
    to{
        letter-spacing:15px;

    }
}
.el-header {
    background-color: #373d41;
    display: flex;
    justify-content:space-between;
    align-items: center

}

.el-aside {
    background-color: #323743;
    .el-menu {
        border-right: none
    }
}
el-main {
    background-color: #E8ECEF;
    width: 100%

}
.home-container {
    height: 100%;
}
.banner {
    display: flex;

    align-items: center
}

.collapse {
    width: 100%;
    height: 50px;
     background-color: #256656;
     font-size: 20px;
     font-weight: bold;
    text-align: center;
     animation: unfolde 0.3s;
     animation-fill-mode : forwards;
     cursor: pointer;
     color: #eaedf1;
     line-height: 45px

}

</style>
<script>
export default {
  data () {
    return {
      menuList: [],
      menuIcos: ['el-icon-s-custom', 'el-icon-s-cooperation',
        'el-icon-s-goods', 'el-icon-s-order', 'el-icon-data-line'],
      isCollapse: false,
      active: ''

    }
  },
  computed: {
    token () {
      return this.isCollapse ? '/' : '|||'
    }
  },
  created () {
    this.getMenuList()
    this.active = window.sessionStorage.getItem('activePath')
  },

  methods: {
    saveActive (activePath) {
      window.sessionStorage.setItem('activePath', activePath)
      this.active = activePath
    },
    collapse () {
      this.isCollapse = !this.isCollapse
      var box = document.querySelector('.collapse')

      box.children[0].innerHTML = '/'
    },
    logout () {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    async getMenuList () {
      const { data: res } = await this.$http.get('menus')

      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.menuList = res.data
    }
  }

}
</script>
